<template>
    <div class="addr">
        <van-swipe-cell v-for="item in addressList" :key="item.phone" v-if="state">
            <van-cell :border="false">
                <template #default>
                    <div class="addr-box">
                        <van-checkbox v-model="item.check" checked-color="#ee0a24" @click.stop="changeState(item.id)"/>
                        <div class="main">
                            <div class="main-info">
                                <span>{{ item.name }}</span>
                                <span class="phone">{{ item.phone }}</span>
                            </div>
                            <div class="addr-detail">{{ item.addr }}- {{ item.detailAddr }}</div>
                        </div>
                    </div>
                </template>
            </van-cell>
            <template #right>
                <van-button square type="danger" @click="deleteAddr(item)" text="删除" />
            </template>
        </van-swipe-cell>
        
        <van-empty description="还没有添加地址" image-size="260px" v-else>
            <span class="toAdd" @click="router.push('/addAddr')">去添加</span>
        </van-empty>
        <footer>
            <button @click="selectAddr">确认选择</button>
        </footer>
    </div>
</template>


<script setup>
import { computed, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { addAddress } from '../../apis/loginApi'
import { showSuccessToast,showFailToast } from 'vant'


const router = useRouter()
const store = useStore()

//用户信息
let user = computed(()=>store.getters['loginModule/getUserInfo'])

//用户收货地址
let addressList = computed(()=> store.getters['loginModule/getAddressList'])
let state = computed(()=>{
    return !!addressList.value.length
})

//选择的地址
let address = computed(()=>{
    return store.getters['loginModule/getAddressList'].filter(item=> item.check === true)
})


//向后端传递的数据
let info = reactive({
    phone:user.value.phone,
    addr:addressList.value
})

// onMounted(() => {
//     console.log(user.value);
//     console.log(addressList.value);
// })

onBeforeUnmount(async()=>{
    let {data} = await addAddress(info)
    console.log(data);
    // console.log(user.value);
})
//删除地址
function deleteAddr(val){
    store.commit('loginModule/deleteAddress',val)
}

//返回
function goBack(){
    router.go(-1)
}

//改变状态
function changeState(val){
        // console.log(val);
        let index = addressList.value.findIndex(item=>item.id === val)
        // console.log('----点击下标',index);
        store.commit('loginModule/allFalse')
        store.commit('loginModule/changeCheck',index)
    
    
    //强制刷新方法,不严谨
    // if(addressState.value.length <= 1){
    //     store.commit('loginModule/changeCheck')
    // }else{
    //     showFailToast('最多只能选择一个地址')
    // }
    // router.go(0)
    
}

//确定
function selectAddr(){
    // console.log(addressState.value.length)

    console.log(address.value.length);
    if(address.value.length !== 0){
        router.go(-1)
        showSuccessToast('选择成功')
    }else{
        showFailToast('您还没有选择任何地址哦')
    }

    
    
}

</script>


<style lang="less" scoped>
@import '../../style/common.less';

.addr {
    background: @g3;
    width: 100%;
    min-height: 621px;
    padding: 0 0 50px 0;

    >.van-swipe-cell {
        height: 100px;
        margin-bottom: 2px;
        >.van-swipe-cell__wrapper {
            >.van-cell--borderless {
                >.van-cell__value {
                    >.addr-box {
                        height: 100px;
                        background: @g1;
                        padding: 4px 10px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 1px solid @g5;
                        text-align: left;
                        color: #000;

                        >.main {
                            width: 85%;
                            >.main-info {
                                font-size: 1.2rem;

                                >.phone {
                                    display: inline-block;
                                    font-size: .8rem;
                                    color: @g8;
                                    margin-left: 16px;
                                }
                            }

                            >.addr-detail {
                                font-size: .65rem;
                                margin: 4px 0;
                            }
                        }
                    }
                }
            }
        }
    }
    >footer {
        position: fixed;
        bottom: 0px;
        background: @g1;
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid @g5;

        >button {
            height: 60%;
            width: 70%;
            border-radius: 30px;
            border: none;
            background: #ee0a24;
            color: @g1;
            font-size: .8rem;
        }
    }

.toAdd{
    display: block;
    font-size: .8rem;
    color: #ee0a24;
    border: 1px solid #ee0a24;
    padding: 8px;
    text-align: center;
    background: @g1;
    width: 100px;
    border-radius: 20px;
}
/deep/.van-button--danger{
        height: 100px;
    }
}

/deep/.van-nav-bar__text {
    color: #f5222d ;
}

/deep/ .van-icon-arrow-left {
    color: #f5222d !important;
}
/deep/ .van-nav-bar__title{
    color: #f5222d;
}

</style>